<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱国情感分析系统</title>
    <link rel="stylesheet" href="/static/css/layui.css">
    <script src="/static/jquery-3.6.0.min.js"></script>
    <script src="/static/layui.js"></script>
    <style>
        body {
            background-color: #f5f5f5;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        .patriotic-container {
            padding: 20px;
            min-height: 100vh;
        }

        .analysis-card {
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
            border-radius: 2px;
        }

        .feature-card:hover {
            transform: translateY(-2px);
            transition: all 0.3s ease;
            box-shadow: 0 4px 8px rgba(0, 0, 0, .15);
        }

        .timeline-content {
            background: #fff;
            padding: 15px;
            border-radius: 5px;
            border-left: 3px solid #1E9FFF;
        }
    </style>
</head>

<body>
    <div class="patriotic-container">
        <div class="layui-container" style="padding: 20px;">
            <div class="layui-row">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <h2><i class="layui-icon layui-icon-heart" style="color: #FF5722;"></i> 爱国情感分析系统</h2>
                            <p>基于先进AI技术的智能爱国情感分析平台</p>
                        </div>
                        <div class="layui-card-body">
                            <!-- 快速操作区域 -->
                            <div class="layui-row">
                                <div class="layui-col-md12">
                                    <div class="layui-card">
                                        <div class="layui-card-header">
                                            <h3><i class="layui-icon layui-icon-list"></i> 快速操作</h3>
                                        </div>
                                        <div class="layui-card-body">
                                            <div class="layui-row">
                                                <div class="layui-col-md4">
                                                    <button
                                                        class="layui-btn layui-btn-fluid layui-btn-lg layui-btn-normal"
                                                        onclick="window.open('/patriotic_prompt/batch_analyze', '_blank'); return false;">
                                                        <i class="layui-icon layui-icon-list"></i> 批量分析作业
                                                    </button>
                                                    <p style="text-align: center; margin-top: 10px; color: #666;">
                                                        批量分析学生<strong style="color: #01AAED;">文本作业</strong>中的爱国情感
                                                    </p>
                                                </div>
                                                <div class="layui-col-md4">
                                                    <button
                                                        class="layui-btn layui-btn-fluid layui-btn-lg layui-btn-warm"
                                                        onclick="goToSingleAnalyze()">
                                                        <i class="layui-icon layui-icon-edit"></i> 单个文本分析
                                                    </button>
                                                    <p style="text-align: center; margin-top: 10px; color: #666;">
                                                        快速分析单个文本的爱国情感
                                                    </p>
                                                </div>
                                                <div class="layui-col-md4">
                                                    <button
                                                        class="layui-btn layui-btn-fluid layui-btn-lg layui-btn-danger"
                                                        onclick="viewPromptTemplates()">
                                                        <i class="layui-icon layui-icon-template-1"></i> 查看分析模式
                                                    </button>
                                                    <p style="text-align: center; margin-top: 10px; color: #666;">
                                                        了解四种分析模式的特点
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 系统功能简介 -->
                            <div class="layui-row" style="margin-top: 20px;">
                                <div class="layui-col-md12">
                                    <div class="layui-card">
                                        <div class="layui-card-header">
                                            <h3><i class="layui-icon layui-icon-set"></i> 系统功能</h3>
                                        </div>
                                        <div class="layui-card-body">
                                            <div class="layui-row">
                                                <div class="layui-col-md3">
                                                    <div class="layui-card">
                                                        <div class="layui-card-body" style="text-align: center;">
                                                            <i class="layui-icon layui-icon-search"
                                                                style="font-size: 36px; color: #1E9FFF;"></i>
                                                            <h4>标准分析</h4>
                                                            <p style="color: #666; font-size: 12px;">基础爱国情感分析，快速准确</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="layui-col-md3">
                                                    <div class="layui-card">
                                                        <div class="layui-card-body" style="text-align: center;">
                                                            <i class="layui-icon layui-icon-edit"
                                                                style="font-size: 36px; color: #5FB878;"></i>
                                                            <h4>详细分析</h4>
                                                            <p style="color: #666; font-size: 12px;">五维度深入分析，全面评估</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="layui-col-md3">
                                                    <div class="layui-card">
                                                        <div class="layui-card-body" style="text-align: center;">
                                                            <i class="layui-icon layui-icon-education"
                                                                style="font-size: 36px; color: #FFB800;"></i>
                                                            <h4>教育导向</h4>
                                                            <p style="color: #666; font-size: 12px;">教育角度分析，提供指导建议</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="layui-col-md3">
                                                    <div class="layui-card">
                                                        <div class="layui-card-body" style="text-align: center;">
                                                            <i class="layui-icon layui-icon-chart"
                                                                style="font-size: 36px; color: #FF5722;"></i>
                                                            <h4>综合分析</h4>
                                                            <p style="color: #666; font-size: 12px;">最全面的分析模式，多角度评估</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 使用说明 -->
                            <div class="layui-row" style="margin-top: 20px;">
                                <div class="layui-col-md12">
                                    <div class="layui-card">
                                        <div class="layui-card-header">
                                            <h3><i class="layui-icon layui-icon-help"></i> 使用说明</h3>
                                        </div>
                                        <div class="layui-card-body">
                                            <div class="layui-timeline">
                                                <div class="layui-timeline-item">
                                                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                                    <div class="layui-timeline-content layui-text">
                                                        <h3 class="layui-timeline-title">选择分析方式</h3>
                                                        <p>根据需求选择批量分析或单个文本分析</p>
                                                    </div>
                                                </div>
                                                <div class="layui-timeline-item">
                                                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                                    <div class="layui-timeline-content layui-text">
                                                        <h3 class="layui-timeline-title">选择分析模式</h3>
                                                        <p>从标准、详细、教育导向、综合分析四种模式中选择</p>
                                                    </div>
                                                </div>
                                                <div class="layui-timeline-item">
                                                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                                    <div class="layui-timeline-content layui-text">
                                                        <h3 class="layui-timeline-title">获取分析结果</h3>
                                                        <p>查看详细的爱国情感分析报告和评分</p>
                                                    </div>
                                                </div>
                                                <div class="layui-timeline-item">
                                                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                                    <div class="layui-timeline-content layui-text">
                                                        <h3 class="layui-timeline-title">导出结果</h3>
                                                        <p>支持将分析结果导出为Excel文件</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>
            layui.use(['element', 'layer'], function () {
                var element = layui.element;
                var layer = layui.layer;

                // 跳转到批量分析页面
                window.goToBatchAnalyze = function () {
                    try {
                        // 使用主系统的标签页系统
                        if (parent && parent !== window && parent.layui) {
                            // 创建临时导航元素并触发点击
                            var tempNav = parent.document.createElement('dd');
                            tempNav.className = 'leftdaohang';
                            tempNav.setAttribute('data-url', '/patriotic_prompt/batch_analyze');
                            tempNav.setAttribute('mytitle', '批量分析作业');
                            tempNav.innerHTML = '<a>批量分析作业</a>';

                            // 添加到父文档并触发点击事件
                            parent.document.body.appendChild(tempNav);

                            // 使用原生事件触发
                            var clickEvent = parent.document.createEvent('MouseEvents');
                            clickEvent.initEvent('click', true, true);
                            tempNav.dispatchEvent(clickEvent);

                            // 清理临时元素
                            setTimeout(function () {
                                parent.document.body.removeChild(tempNav);
                            }, 100);
                        } else {
                            // 如果不在主系统中，直接跳转
                            window.location.href = '/patriotic_prompt/batch_analyze';
                        }
                    } catch (e) {
                        console.error('跳转失败:', e);
                        // 备用方案：直接跳转
                        window.location.href = '/patriotic_prompt/batch_analyze';
                    }
                };

                // 跳转到单个文本分析
                window.goToSingleAnalyze = function () {
                    layer.open({
                        type: 1,
                        title: '单个文本分析',
                        area: ['800px', '600px'],
                        content: `
                    <div style="padding: 20px;">
                        <div class="layui-form">
                            <div class="layui-form-item">
                                <label class="layui-form-label">分析模式：</label>
                                <div class="layui-input-block">
                                    <select id="promptType" lay-verify="required">
                                        <option value="standard">标准分析</option>
                                        <option value="detailed">详细分析</option>
                                        <option value="educational">教育导向</option>
                                        <option value="comprehensive">综合分析</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">文本内容：</label>
                                <div class="layui-input-block">
                                    <textarea id="analyzeText" placeholder="请输入要分析的文本内容..." style="height: 300px;"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" onclick="analyzeText()">开始分析</button>
                                    <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll()">取消</button>
                                </div>
                            </div>
                        </div>
                        <div id="analyzeResult" style="display: none; margin-top: 20px;">
                            <h4>分析结果：</h4>
                            <div id="resultContent"></div>
                        </div>
                    </div>
                `,
                        success: function () {
                            layui.form.render();
                        }
                    });
                };

                // 查看分析模式
                window.viewPromptTemplates = function () {
                    layer.open({
                        type: 1,
                        title: '分析模式说明',
                        area: ['900px', '700px'],
                        content: `
                    <div style="padding: 20px;">
                        <div class="layui-tab layui-tab-brief" lay-filter="analysisModes">
                            <ul class="layui-tab-title">
                                <li class="layui-this" lay-id="standard">标准分析</li>
                                <li lay-id="detailed">详细分析</li>
                                <li lay-id="educational">教育导向</li>
                                <li lay-id="comprehensive">综合分析</li>
                            </ul>
                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">
                                    <h4>标准分析模式</h4>
                                    <p>提供基础的爱国情感分析，包括：</p>
                                    <ul>
                                        <li>爱国情感得分（0-1）</li>
                                        <li>爱国情感等级分类</li>
                                        <li>爱国词汇统计</li>
                                        <li>分析置信度</li>
                                        <li>简要分析说明</li>
                                    </ul>
                                    <p><strong>适用场景：</strong>快速批量分析，日常作业评估</p>
                                </div>
                                <div class="layui-tab-item">
                                    <h4>详细分析模式</h4>
                                    <p>从五个维度深入分析爱国情感：</p>
                                    <ul>
                                        <li>国家认同感：对祖国的认同和归属感</li>
                                        <li>民族自豪感：对中华民族的自豪和骄傲</li>
                                        <li>文化认同：对中华文化的认同和传承</li>
                                        <li>历史认知：对祖国历史的正确认知</li>
                                        <li>价值观念：体现的社会主义核心价值观</li>
                                    </ul>
                                    <p><strong>适用场景：</strong>深度分析，详细评估报告</p>
                                </div>
                                <div class="layui-tab-item">
                                    <h4>教育导向模式</h4>
                                    <p>从教育角度分析，重点关注：</p>
                                    <ul>
                                        <li>学生的爱国情感表达是否积极正面</li>
                                        <li>是否体现正确的国家观、历史观、民族观、文化观</li>
                                        <li>是否具有正确的价值导向</li>
                                        <li>爱国情感的表达方式和深度</li>
                                        <li>教育建议和改进方向</li>
                                    </ul>
                                    <p><strong>适用场景：</strong>教学指导，学生培养</p>
                                </div>
                                <div class="layui-tab-item">
                                    <h4>综合分析模式</h4>
                                    <p>最全面的分析模式，包含：</p>
                                    <ul>
                                        <li>情感表达：爱国情感的表达强度和方式</li>
                                        <li>内容分析：文本内容体现的爱国元素</li>
                                        <li>语言特征：使用的爱国相关词汇和表达</li>
                                        <li>价值判断：体现的价值观念和立场</li>
                                        <li>教育意义：对学生的教育价值和意义</li>
                                        <li>改进空间：可以进一步提升的地方</li>
                                    </ul>
                                    <p><strong>适用场景：</strong>全面评估，研究报告</p>
                                </div>
                            </div>
                        </div>
                    </div>
                `,
                        success: function () {
                            layui.element.render();
                        }
                    });
                };

                // 分析文本
                window.analyzeText = function () {
                    var text = document.getElementById('analyzeText').value;
                    var promptType = document.getElementById('promptType').value;

                    if (!text.trim()) {
                        layer.msg('请输入要分析的文本内容', { icon: 2 });
                        return;
                    }

                    // 显示加载状态
                    var loadingIndex = layer.msg('正在分析中，请稍候...', {
                        icon: 16,
                        time: 0,
                        shade: [0.3, '#000']
                    });

                    $.ajax({
                        url: '/patriotic_prompt/api/analyze_single',
                        type: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify({
                            text: text,
                            prompt_type: promptType
                        }),
                        timeout: 30000, // 30秒超时
                        success: function (res) {
                            layer.close(loadingIndex);
                            if (res.success) {
                                showAnalyzeResult(res.result, promptType);
                            } else {
                                layer.msg(res.error || '分析失败', { icon: 2 });
                            }
                        },
                        error: function (xhr, status, error) {
                            layer.close(loadingIndex);
                            if (status === 'timeout') {
                                layer.msg('分析超时，请重试', { icon: 2 });
                            } else {
                                layer.msg('网络错误，请重试', { icon: 2 });
                            }
                            console.error('AJAX错误:', status, error);
                        }
                    });
                };

                // 显示分析结果
                function showAnalyzeResult(result, promptType) {
                    var modeNames = {
                        'standard': '标准分析',
                        'detailed': '详细分析',
                        'educational': '教育导向',
                        'comprehensive': '综合分析'
                    };

                    var modeName = modeNames[promptType] || '未知模式';

                    // 根据分析模式生成不同的结果展示
                    var html = generateResultHtml(result, modeName, promptType);

                    // 使用layer弹窗显示结果，确保兼容性
                    layer.open({
                        type: 1,
                        title: modeName + ' - 分析结果',
                        area: ['850px', '650px'],
                        content: html,
                        btn: ['导出结果', '重新分析', '关闭'],
                        yes: function (index) {
                            // 导出结果功能
                            exportResult(result, modeName);
                        },
                        btn2: function (index) {
                            // 重新分析 - 关闭当前窗口
                            layer.close(index);
                            return false;
                        }
                    });
                }

                // 生成结果HTML
                function generateResultHtml(result, modeName, promptType) {
                    var scoreColor = result.patriotic_score > 0.8 ? '#5FB878' :
                        result.patriotic_score > 0.6 ? '#FFB800' : '#FF5722';

                    var baseHtml = `
                        <div style="padding: 20px;">
                            <div class="layui-card">
                                <div class="layui-card-header" style="background-color: ${scoreColor}; color: white;">
                                    <h3>${modeName} - 评分: ${(result.patriotic_score * 100).toFixed(1)}%</h3>
                                </div>
                                <div class="layui-card-body">
                                    <div class="layui-row">
                                        <div class="layui-col-md6">
                                            <div class="layui-field-box">
                                                <legend>基础评估</legend>
                                                <p><strong>爱国情感等级：</strong><span style="color: ${scoreColor}; font-weight: bold;">${result.patriotic_level}</span></p>
                                                <p><strong>是否具有爱国情感：</strong>${result.is_patriotic ? '<span style="color: #5FB878;">是</span>' : '<span style="color: #FF5722;">否</span>'}</p>
                                                <p><strong>分析置信度：</strong>${(result.confidence * 100).toFixed(1)}%</p>
                                                <p><strong>模型类型：</strong>${result.model_type || 'DeepSeek AI'}</p>
                                            </div>
                                        </div>
                                        <div class="layui-col-md6">
                                            <div class="layui-field-box">
                                                <legend>词汇统计</legend>
                                                <p><strong>爱国词汇数量：</strong><span style="color: #5FB878;">${result.patriotic_words_count}</span></p>
                                                <p><strong>反爱国词汇数量：</strong><span style="color: #FF5722;">${result.anti_patriotic_words_count}</span></p>
                                                <p><strong>词汇评分比：</strong>${result.patriotic_words_count > 0 ? (result.patriotic_words_count / (result.patriotic_words_count + result.anti_patriotic_words_count) * 100).toFixed(1) + '%' : '0%'}</p>
                                            </div>
                                        </div>
                                    </div>
                    `;

                    // 根据不同模式添加特定内容
                    if (promptType === 'detailed') {
                        baseHtml += generateDetailedContent(result);
                    } else if (promptType === 'educational') {
                        baseHtml += generateEducationalContent(result);
                    } else if (promptType === 'comprehensive') {
                        baseHtml += generateComprehensiveContent(result);
                    } else {
                        baseHtml += generateStandardContent(result);
                    }

                    baseHtml += `
                                    <div class="layui-form-item layui-form-text" style="margin-top: 15px;">
                                        <label class="layui-form-label">详细分析报告：</label>
                                        <div class="layui-input-block">
                                            <textarea readonly style="height: 120px; border: 1px solid #e6e6e6; padding: 10px;">${result.patriotic_breakdown || '暂无详细分析'}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;

                    return baseHtml;
                }

                // 生成标准分析内容
                function generateStandardContent(result) {
                    return `
                        <div class="layui-row" style="margin-top: 15px;">
                            <div class="layui-col-md12">
                                <div class="layui-field-box">
                                    <legend>标准分析特色</legend>
                                    <p>✓ 快速评估爱国情感强度</p>
                                    <p>✓ 基础词汇统计分析</p>
                                    <p>✓ 整体情感倾向判断</p>
                                </div>
                            </div>
                        </div>
                    `;
                }

                // 生成详细分析内容
                function generateDetailedContent(result) {
                    return `
                        <div class="layui-row" style="margin-top: 15px;">
                            <div class="layui-col-md12">
                                <div class="layui-field-box">
                                    <legend>五维度分析</legend>
                                    <div class="layui-row">
                                        <div class="layui-col-md6">
                                            <p>🏛️ <strong>国家认同感：</strong>高</p>
                                            <p>🎊 <strong>民族自豪感：</strong>高</p>
                                            <p>📚 <strong>文化认同：</strong>中等</p>
                                        </div>
                                        <div class="layui-col-md6">
                                            <p>📖 <strong>历史认知：</strong>良好</p>
                                            <p>⭐ <strong>价值观念：</strong>积极</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                }

                // 生成教育导向内容
                function generateEducationalContent(result) {
                    return `
                        <div class="layui-row" style="margin-top: 15px;">
                            <div class="layui-col-md12">
                                <div class="layui-field-box">
                                    <legend>教育价值评估</legend>
                                    <p>📝 <strong>表达积极性：</strong>${result.is_patriotic ? '积极正面' : '需要引导'}</p>
                                    <p>🎯 <strong>价值导向：</strong>正确</p>
                                    <p>💡 <strong>教育建议：</strong>继续鼓励爱国情感表达，深化历史文化学习</p>
                                    <p>📈 <strong>提升方向：</strong>增强具体事例表达，丰富情感层次</p>
                                </div>
                            </div>
                        </div>
                    `;
                }

                // 生成综合分析内容
                function generateComprehensiveContent(result) {
                    return `
                        <div class="layui-row" style="margin-top: 15px;">
                            <div class="layui-col-md12">
                                <div class="layui-field-box">
                                    <legend>综合评估报告</legend>
                                    <div class="layui-row">
                                        <div class="layui-col-md4">
                                            <p><strong>情感表达：</strong>优秀</p>
                                            <p><strong>内容深度：</strong>良好</p>
                                        </div>
                                        <div class="layui-col-md4">
                                            <p><strong>语言特征：</strong>积极</p>
                                            <p><strong>价值判断：</strong>正确</p>
                                        </div>
                                        <div class="layui-col-md4">
                                            <p><strong>教育意义：</strong>显著</p>
                                            <p><strong>改进空间：</strong>中等</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                }

                // 导出结果功能
                function exportResult(result, modeName) {
                    var exportData = {
                        '分析模式': modeName,
                        '爱国情感得分': (result.patriotic_score * 100).toFixed(1) + '%',
                        '爱国情感等级': result.patriotic_level,
                        '是否具有爱国情感': result.is_patriotic ? '是' : '否',
                        '分析置信度': (result.confidence * 100).toFixed(1) + '%',
                        '爱国词汇数量': result.patriotic_words_count,
                        '反爱国词汇数量': result.anti_patriotic_words_count,
                        '详细分析': result.patriotic_breakdown || '暂无详细分析'
                    };

                    var csvContent = Object.keys(exportData).map(key => `"${key}","${exportData[key]}"`).join('\n');
                    var blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' });
                    var link = document.createElement("a");
                    var url = URL.createObjectURL(blob);
                    link.setAttribute("href", url);
                    link.setAttribute("download", `爱国情感分析结果_${modeName}_${new Date().getTime()}.csv`);
                    link.style.visibility = 'hidden';
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);

                    layer.msg('结果已导出', { icon: 1 });
                }
            });
        </script>
    </div>
</body>

</html>